import { EventNames, useEventCenterOn } from '@/dataTransfer/eventCenter';
import { useDoubleClick } from '@/utils/hooks/useDoubleClick';
import utils from '@/utils/index';
import Taro, { useDidShow } from '@tarojs/taro';
import React, { useEffect, useMemo, useState } from 'react';
import { defaultVisibleEnums } from '../moduleConstants';
import { BarPosition } from '../StandNavBar/CustomNavBar/constants';
import { TopCustomNavBarStyle, TopCustomNavBarTopStyle } from './constants';
import MoreNavBar from './MoreNavBar';
import SearchNavBar from './SearchNavBar';
import TitleNavBar from './TitleNavBar';

const components = {
  1: TitleNavBar,
  2: SearchNavBar,
  3: MoreNavBar,
};

const ModuleNavBar = ({
  componentCfg,
  componentCfg: { styleSetting, content } = {},
  title,
  pageName,
}) => {
  const styleSettingRender = styleSetting ?? { style: TopCustomNavBarStyle.one };

  // 是否沉浸式
  const isImmerse = styleSettingRender?.topStyle === TopCustomNavBarTopStyle.immerse;

  // bar 显示状态 => 永久显示 / 临时隐藏 / 临时显示
  const [barPosition, setBarPosition] = useState(BarPosition.hidden);
  const updateBarStatus = (v) => {
    if (barPosition !== v) {
      setBarPosition(v);
    }
  };

  // 顶部双击事件
  const dbClickWrap = useDoubleClick();
  const onDbClick = useMemo(() => {
    return dbClickWrap((e) => {
      Taro.eventCenter.trigger(EventNames.ModuleNavBarDbClick, {
        event: e,
        pageName,
        from: 'TitleNavBar',
        position: 'title',
      });
    });
  }, [pageName]);

  const CustomTag = components[styleSettingRender.style];

  const params = {
    title,
    position: barPosition,

    // DefaultNavBar
    back: pageName === 'home' ? false : Taro.getCurrentPages()?.length > 1,
    backBlock: true,

    // SearchNavBar
    navBarTitleLocation: styleSetting?.titleLocation,
    placeholder: content?.searchText,

    // MoreNavBar
    showIcon: {
      allGoods: content?.allGoods === defaultVisibleEnums.show,
      cart: content?.cart === defaultVisibleEnums.show,
      search: content?.search === defaultVisibleEnums.show,
      userCenter: content?.userCenter === defaultVisibleEnums.show,
    },

    pageName,
    onDbClick,
  };

  console.log('debug for ModuleNavBar', {
    componentCfg,
    content,
    barStatus: barPosition,
    isImmerse,
    pageName,
    title,
    params,
  });

  // 设置标题栏状态
  useEffect(() => {
    if (!componentCfg) {
      return;
    }

    updateBarStatus(isImmerse ? BarPosition.hidden : BarPosition.default);
  }, [componentCfg, isImmerse]);

  // 滚动监听
  useEventCenterOn(
    EventNames.ModuleScroll,
    ({ event, pageName: scrollPageName }) => {
      // 不是同一个页面的滚动
      if (scrollPageName !== pageName) {
        return;
      }

      // 不是 沉浸式, 忽略
      if (!isImmerse) {
        updateBarStatus(BarPosition.default);
        return;
      }

      const currentTop = event?.detail?.scrollTop ?? 0;

      // 高度没有滚过 一个默认的 导航高度, 则不显示
      if (currentTop < Taro.$statusBarHeight + Taro.$titleHeight) {
        updateBarStatus(BarPosition.hidden);
      } else {
        updateBarStatus(BarPosition.suspended);
      }
    },
    [barPosition],
  );

  // 设置 标题
  useEffect(() => {
    utils.setTitle(title);
  }, [title]);

  useDidShow(() => {
    utils.setTitle(title);
  });

  return <CustomTag {...params} />;
};

export default ModuleNavBar;
